$theme-name: 'hc-light';

$ui-transitions: false;

// Notification & alert
$red: #990000;

$orange: #ed3400;
$dark-yellow: #af6b00;
$yellow: #a78820;
$lighter-yellow: #f4f4f4;

$green: #009900;
$lighter-green: #00cc00;

$blue: #111111;

$disabled-bg-color: #f0f0f0;
$disabled-item-color: #ffffff;
$disabled-item-bg-color: #9f9f9f;

$error: #ad1f1f;
$error-focus: #ad1f1f;

$progress-complete-color: #111111;
$progress-current-color: #484848;
$progress-default-color: #9f9f9f;

// Layout
$header-bg-color: #f3f3f3;
$sidebar-bg-color: #000000;

$sidebar-mode-icon-color: #9f9f9f;
$sidebar-mode-icon-hover-color: #ffffff;

// Main
$font-color: #000000;
$font-light-color: #222222;
$font-selected-color: #ffffff;
$font-alt-color: #333333;
$body-bg-color: #ffffff;
$overlay-bg-color: #000000;
$overlay-border-color: #383838;

// Main menu
$menu-main-icon-color: #ffffff;
$menu-main-expanded-icon-color: #000000;

$menu-main-color: #ffffff;
$menu-main-hover-color: #000000;
$menu-main-hover-bg-color: #e6e6e6;
$menu-main-hover-border-color: transparent;
$menu-main-selected-bg-color: #000000;
$menu-main-selected-border-color: #f3f3f3;
$menu-main-expanded-color: #000000;
$menu-main-expanded-bg-color: #f3f3f3;

$menu-main-submenu-color: #f4f4f4;
$menu-main-submenu-bg-color: #333333;
$menu-main-submenu-border-color: #0d0d0d;
$menu-main-submenu-hover-color: #000000;
$menu-main-submenu-hover-bg-color: #e6e6e6;
$menu-main-submenu-hover-border-color: transparent;
$menu-main-submenu-selected-color: #000000;
$menu-main-submenu-selected-bg-color: #f3f3f3;
$menu-main-submenu-selected-border-color: #949494;

$menu-main-submenu-next-level-bg: #000000 !default;
$menu-main-submenu-next-level-shadow: transparent !default;

$menu-user-icon-color: #c8c8c8;
$menu-user-expanded-icon-color: #000000;

$menu-user-color: #c8c8c8;
$menu-user-hover-color: #ffffff;
$menu-user-hover-border-color: #ffffff;
$menu-user-disabled-color: #9f9f9f;

$menu-user-submenu-color: #f4f4f4;
$menu-user-submenu-bg-color: #333333;
$menu-user-submenu-border-color: #0d0d0d;
$menu-user-submenu-hover-color: #000000;
$menu-user-submenu-hover-bg-color: #e6e6e6;
$menu-user-submenu-hover-border-color: transparent;
$menu-user-submenu-selected-color: #000000;
$menu-user-submenu-selected-bg-color: #f3f3f3;
$menu-user-submenu-selected-border-color: #949494;

$menu-user-submenu-next-level-bg: #000000 !default;
$menu-user-submenu-next-level-shadow: transparent !default;

// Sidebar
$sidebar-server-name-color: #9f9f9f;

// UI
$ui-bg-color: #ffffff;
$ui-bg-selected-color: #333333;
$ui-hover-bg-color: #f4f4f4;
$ui-border-color: #9f9f9f;
$ui-placeholder-background-color: darken($body-bg-color, 10%);
$ui-highlighted-parent-background-color: darken($body-bg-color, 4%);

$action-hover-color: #f4f4f4;
$action-border-color: #383838;
$action-shadow-color: rgba(0, 0, 0, .5);

$table-border-color: #888888;

$ui-tab-bg-selected-color: #888888;

// Forms
$form-border-color: #888888;
$form-focus-border-color: #000000;
$form-fields-group-border-color: #888888;
$form-field-hint-color: #383838;
$form-radio-selected-color: #000000;
$form-description-border-color: #000000;

$form-disabled-font-color: #9f9f9f;
$form-disabled-bg-color: #f0f0f0;
$form-disabled-border-color: #9f9f9f;

$scrollbar-track-color: #999999;
$scrollbar-thumb-color: #f9f9f9;
$scrollbar-thumb-color-darken: 30%;

$input-placeholder-color: #777777;
$input-disabled-placeholder-color: #c8c8c8;

// Search form
$form-search-icon-color: #ffffff;
$form-search-icon-hover-color: #ffffff;
$form-search-icon-focus-color: #000000;
$form-search-bg-color: #000000;
$form-search-border-color: #ffffff;
$form-search-focused-color: #000000;
$form-search-focused-bg-color: #ffffff;
$form-search-focused-border-color: #ffffff;

// Buttons
$btn-bg-color: #555555;
$btn-hover-bg-color: #484848;
$btn-focus-bg-color: #6f6f6f;
$btn-focus-border-color: #484848;
$btn-focus-outline-color: #111111;

$btn-alt-color: $font-color;

$btn-form-color: #333333;

$btn-disabled-color: #999999;
$btn-disabled-bg-color: transparent;
$btn-disabled-border-color: #999999;

$btn-back-map-background-color: rgba(0, 0, 0, .8);
$btn-back-text-color: #ffffff;
$btn-back-background-hover: #000000;

// Links
$link-color: #555555;
$link-hover-color: #000000;
$link-active-color: #555555;
$link-visited-color: #555555;

$link-alt-underline-color: #808080;

// Icons.
$icon-color: #555555;

$btn-icon-color: #555555;
$btn-icon-hover-color: #000000 !default;
$btn-icon-disabled-color: #cccccc;

// Analog clock
$clock-face-color: #ffffff;
$clock-hand-color: #000000;
$clock-hand-sec-color: #555555;
$clock-lines-color: #555555;

// Gauge arcs
$gauge-empty-color: #f3f3f3;
$gauge-fill-color: #555555;
$gauge-needle-fill-color: #000000;
$gauge-needle-stoke-color: #000000;

// Pie chart.
$pie-chart-arc-no-data-color: #f3f3f3;

// Honeycomb.
$honeycomb-cell-color: #aad7e9;
$honeycomb-no-data-cell-color: #f3f3f3;
$honeycomb-label-color: #1f2c33;
$honeycomb-no-data-label-color: #1f2c33;

// Map.
$map-hover-fill-color: #e8e9ed;
$map-selected-fill-color: #d9d9d9;
$map-selected-stroke-color: #747474;

// Geomap.
$geomap-marker-hover-fill: #e8e9ed;
$geomap-marker-selected-fill: #d9d9d9;
$geomap-marker-selected-stroke: #747474;

// Statuses
$status-disabled-border-color: rgba(#000000, 0.2);

// Multiselect
$multiselect-selected-bg-color: #777777;

// List table.
$compact-view-color: #000000;
$compact-view-tag-color: #ffffff;
$compact-view-tag-bg-color: $ui-bg-selected-color;

// Dashboard list table.
$dashboard-shared-bg-color: #555555;
$dashboard-my-bg-color: #555555;

// Import compare.
$toc-title-bg-color: #333333;
$diff-added-bg-color: transparent;
$diff-removed-bg-color: transparent;

// Change indicators.
$arrow-fill-up: #000000;
$arrow-fill-down: #000000;
$arrow-fill-up-down: #000000;

// Important! @import string should come after variables
@import 'screen';

// layout/sidebar
.sidebar {
	.logo {
		&:focus {
			.zabbix-logo-sidebar {
				box-shadow: 0 0 0 2px #ffffff;
			}
		}
	}

	button {
		&:focus {
			box-shadow: 0 0 0 2px #ffffff;
		}
	}

	&.is-compact:not(.is-opened) {
		.menu-main {
			& > li {
				&.is-selected {
					> a {
						background: $menu-main-expanded-bg-color;
						border-left-color: $menu-main-expanded-border-color;

						&::before {
							color: $menu-main-expanded-icon-color;
						}
					}
				}
			}
		}
	}
}

a.btn-icon,
.btn-icon {
	&:link,
	&:hover,
	&:focus,
	&:visited {
		border-bottom: none;
	}
}

// components/menu-user
.menu-user {
	a {
		&:link,
		&:visited {
			border-bottom: 0;
		}
	}
}

.form-search {
	.search {
		&:focus ~ .btn-icon {
			color: $form-search-icon-focus-color !important;
		}
	}

	.btn-icon {
		&:focus {
			color: $form-search-icon-color;

			&:hover {
				color: $form-search-icon-color;
			}
		}
	}
}

.dashboard-navigation-tabs {
	.sortable {
		li div:hover,
		li.sortable-item-dragging div {
			border: 1px solid darken($action-hover-color, 40%);
		}
	}

	.btn-dashboard-page-properties {
		color: lighten($btn-icon-color, 25%);
	}
}

// Dashboard, widgets and iterators.
// To maintain code clarity:
//   - Do not mix rules for dashboard view mode and dashboard edit mode.
//   - Do not mix rules for widgets and iterators.

.dashboard-widget-placeholder {
	.dashboard-widget-placeholder-box {
		box-shadow: none;
		border-color: $font-color;
		background-color: transparent;
	}

	.dashboard-widget-placeholder-resizing {
		border: 2px dashed $font-color;
		box-shadow: none;
	}
}

.dashboard.dashboard-is-edit-mode {
	.dashboard-grid-iterator {
		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			.dashboard-grid-iterator-mask {
				border: 0;
			}
		}
	}
}

.dashboard-widget-graph-link {
	&:focus {
		&::after {
			background: $blue;
			height: 3px;
			bottom: -3px;
		}
	}
}

.subfilter-enabled {
	.link-action {
		color: $link-hover-color;

		&:focus {
			color: $link-hover-color;
			border-bottom: 3px solid $link-hover-color;
		}

		&:hover {
			color: $link-hover-color;
			border-bottom: 1px solid $link-hover-color;
		}
	}
}

.timeline-axis {
	border-right-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;

	&::before {
		background-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
	}
}

.menu-popup {
	.menu-popup-item {
		&:hover,
		&:focus,
		&:active,
		&.highlighted {
			background-color: #000000;
			color: #ffffff;

			.arrow-right {
				border-left-color: #ffffff;
			}
		}

		&.disabled {
			color: $form-disabled-font-color;
		}
	}
}

.radio-list-control {
	.normal-bg,
	.average-bg,
	.disaster-bg,
	.high-bg,
	.info-bg,
	.na-bg,
	.warning-bg {
		&::before,
		&::after {
			display: none;
		}
	}

	li {
		input[type="radio"] {
			&:checked:not([disabled]) + label {
				color: $white;
			}

			&:checked + label {
				background-color: $ui-bg-selected-color !important;
			}

			&:not([readonly]):focus + label {
				background-color: lighten($btn-bg-color, 10%) !important;
				box-shadow: 0 0 0 2px $btn-focus-outline-color !important;
				color: $white;
			}

			&:checked[disabled] + label {
				background-color: #d3d3d3 !important;
			}

			&[readonly]:checked + label {
				background-color: #b2b4bb !important;
				-webkit-text-fill-color: #292929;
			}
		}
	}

	&.has-error {
		input[type="radio"]:focus + label {
			box-shadow: 0 0 0 2px rgba($error-focus, 0.35);
		}
	}
}

a {
	&:link {
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:visited,
	&:hover {
		border-bottom: 1px solid $link-hover-color;
	}

	&:focus {
		border-bottom: 3px solid $link-hover-color;
	}
}

a.link-action {
	border-bottom: 1px dotted;
}

.link-action {
	&:hover {
		border-bottom-color: rgba($link-hover-color, .5);
	}

	&:active,
	&:focus {
		margin-bottom: -3px;
		color: $link-hover-color;
		border-bottom: 3px solid $link-hover-color;
	}
}

.link-alt {
	&:link,
	&:visited {
		border-bottom-color: $link-alt-underline-color;
	}

	&:hover {
		border-bottom-color: $link-hover-color;
	}

	&:focus {
		border-bottom: 3px solid $link-hover-color;
	}

	&:active {
		border-bottom-color: $link-active-color;
	}
}

.header-navigation {
	li,
	> li:first-child {
		> span a:focus {
			margin-bottom: -2px;
		}
	}

	> li {
		> span a:focus {
			line-height: 12px;
		}
	}
}

.btn-link {
	font-weight: bold;
	color: #000000;

	&:focus {
		margin-bottom: -3px !important;
		border-bottom: 3px solid $link-hover-color;
	}
}

.table-paging {
	a {
		&:focus {
			background-color: #777777 !important;
		}
	}
}

.paging-selected {
	&:focus {
		background-color: #777777 !important;
	}
}

.tag {
	&.green-bg,
	&.yellow-bg {
		background-color: $ui-bg-selected-color;
		color: $white;
	}

	&.tag-inherited,
	&.tag-inherited-duplicate {
		&::before {
			opacity: 1;
		}
	}
}

.disabled {
	opacity: .5;
}

.multiselect {
	&.active {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}

	input[type="text"] {
		&:focus {
			box-shadow: none;
		}
	}

	.multiselect-list {
		li.selected {
			.subfilter-enabled,
			.subfilter-disable-btn,
			.subfilter-disable-btn:active {
				box-shadow: 0 0 0 1px $btn-focus-outline-color;
			}
		}
	}
}

.multiselect-control {
	&.has-error {
		> .multiselect.active {
			box-shadow: 0 0 0 1px $error-focus;
		}
	}
}

.checkbox-radio {
	&:focus + label span {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}

	&[type="checkbox"] {
		&.has-error {
			&:focus + label span {
				box-shadow: 0 0 0 1px $error-focus;
			}
		}
	}
}

.checkbox-list {
	li {
		padding-left: 1px;
		margin-left: -1px;
	}
}

z-select.has-error button.focusable:active,
z-select.has-error button.focusable:hover,
z-select.has-error button.focusable,
input[type="text"].has-error,
input[type="password"].has-error,
input[type="search"].has-error,
input[type="number"].has-error,
input[type="email"].has-error,
input[type="time"].has-error,
input[type="file"].has-error,
textarea.has-error {
	&:focus {
		box-shadow: 0 0 0 1px $error-focus;
	}
}

%form-input-style {
	&:focus {
		box-shadow: 0 0 0 1px $btn-focus-outline-color;
	}
}

.multiselect-suggest {
	.suggest-hover {
		color: #ffffff;
		background-color: #000000;

		.grey {
			color: #dcdcdc;
		}

		.suggest-found {
			color: lighten($alt-yellow, 10%);
		}
	}
}

.suggest-found {
	color: darken($dark-yellow, 10%);
}

// Tables.
.list-table {
	.subfilter-enabled {
		background-color: $ui-bg-color;
		box-shadow: 0 0 0 1px $link-hover-color;
	}

	thead th {
		border-color: lighten($table-border-color, 3%);
	}

	.problem-nested:not([class*='flh-']):not(.row-selected):not(:hover) {
		background-color: $ui-bg-color;

		td {
			border-bottom-color: $table-border-color !important;
		}

		.timeline-axis,
		.timeline-td,
		.timeline-date,
		.problem-expand-td {
			border-bottom-color: transparent !important;
		}
	}

	.action-container {
		.link-action {
			&:active,
			&:focus {
				margin-bottom: -3px;
			}
		}
	}

	&.compact-view {
		td {
			&.na-bg,
			&.normal-bg,
			&.info-bg,
			&.warning-bg,
			&.average-bg,
			&.high-bg,
			&.disaster-bg {
				&::before {
					font-size: 22px;
					padding-top: 0;
					padding-bottom: 0;
				}
			}
		}
	}

	&.compact-view,
	&.has-highlighted-rows {
		.flh-na-bg,
		.flh-info-bg,
		.flh-warning-bg,
		.flh-average-bg,
		.flh-high-bg,
		.flh-disaster-bg {
			&:not(.row-selected):not(:hover) {
				background: none;
			}
		}

		td {
			box-shadow: inset 0 -1px 0 0 $table-border-color;

			&.na-bg,
			&.normal-bg,
			&.info-bg,
			&.warning-bg,
			&.average-bg,
			&.high-bg,
			&.disaster-bg {
				&::before {
					box-shadow: inset 0 -1px 0 0 $table-border-color;
				}
			}
		}
	}
}

// Checkbox disabling.
.filter-highlight-row-cb {
	display: none;
}

// Severity statuses.

.status-container {
	.status-na-bg,
	.status-info-bg,
	.status-warning-bg,
	.status-average-bg,
	.status-high-bg,
	.status-disaster-bg {
		border-color: rgba($ui-bg-color, .2);
		background-color: $ui-bg-selected-color;
		color: $ui-bg-color;
	}
}

%severity-icon {
	background-color: rgba(0, 0, 0, .0) !important;

	&::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 34px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 26px;
		color: #ffffff;
		text-align: center;
		-webkit-text-stroke: 0.4px rgba(0, 0, 0, .2);
	}
}

@each $type, $icon in (
	na-bg: $zi-circle-question-filled,
	normal-bg: $zi-circle-check-filled,
	info-bg: $zi-circle-info-filled,
	average-bg: $zi-triangle-warning,
	warning-bg: $zi-circle-warning-filled,
	high-bg: $zi-triangle-flipped-warning,
	disaster-bg: $zi-stop-sign,
	log-na-bg: $zi-circle-question-filled,
	log-info-bg: $zi-circle-info-filled,
	log-warning-bg: $zi-circle-warning-filled,
	log-high-bg: $zi-triangle-flipped-warning,
	log-disaster-bg: $zi-stop-sign
) {
	// Dynamically generated classes:
	//  .na-bg,
	//  .normal-bg,
	//  .info-bg,
	//  .average-bg,
	//  .warning-bg,
	//  .high-bg,
	//  .disaster-bg,
	//  .log-na-bg,
	//  .log-info-bg,
	//  .log-warning-bg,
	//  .log-high-bg,
	//  .log-disaster-bg
	.#{$type} {
		@extend %severity-icon;

		&::before {
			@extend %icons-font;

			content: $icon;
		}
	}
}

.na-bg,
.log-na-bg,
.normal-bg {
	&::before {
		background-color: $alt-green;
	}
}

.na-bg,
.normal-bg,
.info-bg,
.average-bg,
.warning-bg,
.high-bg,
.disaster-bg {
	&.blink-hidden::after {
		content: none;
	}

	a.link-action {
		color: $link-color;
	}
}

// Dynamically generated classes:
//  .log-na-bg
//  .log-info-bg
//  .log-warning-bg
//  .log-high-bg
//  .log-disaster-bg
@each $class, $color in (
	na-bg: $alt-blue-grey,
	info-bg: $alt-dark-blue,
	warning-bg: $alt-yellow,
	high-bg: $alt-dark-orange,
	disaster-bg: $alt-red
) {
	.log-#{$class}::before {
		color: darken($color, 45%) !important;
		background-color: $color !important;
	}
}

td.na-bg,
td.normal-bg,
td.info-bg,
td.average-bg,
td.warning-bg,
td.high-bg,
td.disaster-bg,
td.log-na-bg,
td.log-info-bg,
td.log-warning-bg,
td.log-high-bg,
td.log-disaster-bg {
	padding-left: 42px !important;
	color: $font-color;
}

.notif-body {
	h4 {
		padding-bottom: 3px;
		margin-bottom: -3px;
	}

	p {
		margin-bottom: 2px;
	}

	li {
		padding-left: 42px;
	}
}

.notif-indic {
	width: 34px;
	height: 27px;
	position: relative;
	margin: 0 0 0 -42px;

	.notif-indic-snooze {
		margin-top: 32px;
	}
}

td.inactive-bg {
	padding-left: 42px !important;
	color: $font-color;
}

.inactive-bg {
	@extend %severity-icon;

	&::before {
		@extend %icons-font;

		content: $zi-stop-sign;
		background-color: $alt-red;
	}
}

// Error messages.
.msg-bad,
.msg-good,
.msg-warning {
	.link-action:hover {
		color: $link-hover-color;
	}
}

// Graph and map.
.graph-selection {
	background-color: rgba($font-color, .1);
	border: 0;
	outline: 2px solid rgba($font-color, .6);
}

.svg-graph-selection {
	fill: rgba($font-color, .1);
	stroke: rgba($font-color, .6);
	stroke-width: 2px;
}

.ui-selectable-helper {
	background-color: rgba($font-color, .1);
	border: 2px solid rgba($font-color, .6);
}

.map-element-selected {
	border-color: $font-color;
}

// Time selection.
.ui-tabs-nav {
	.btn-time,
	.filter-trigger {
		&:hover {
			background-color: darken($btn-bg-color, 10%);
		}

		&:focus {
			background-color: lighten($btn-bg-color, 10%);
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}
	}

	.ui-state-focus {
		.btn-time,
		.filter-trigger {
			background-color: lighten($btn-bg-color, 10%);
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}

		&.ui-tabs-active {
			.btn-time,
			.filter-trigger {
				background-color: $ui-hover-bg-color;
				border-color: $ui-hover-bg-color;
				box-shadow: 0 0 0 2px $btn-focus-outline-color;
			}
		}
	}
}

.time-quick {
	li {
		a {
			&:focus {
				box-shadow: 0 0 0 2px $btn-focus-outline-color;
			}
		}
	}
}

.problem-icon-link {
	border-radius: 3px;

	&:focus {
		box-shadow: 0 0 0 2px $btn-focus-outline-color;
	}
}

.problem-icon-link,
.problem-icon-list {
	.problem-icon-list-item {
		@extend %icon-medium;

		padding-left: 0;
		color: $font-color;
		border: none;
		background: transparent;

		&::before {
			@extend %icons-font;

			margin-right: 4px;
			color: $ui-bg-color;
			-webkit-text-stroke: 0.4px rgba(0, 0, 0, .2);
			border-radius: 3px;
		}
	}

	// Dynamically generated classes:
	//  .status-na-bg
	//  .status-normal-bg
	//  .status-info-bg
	//  .status-average-bg
	//  .status-warning-bg
	//  .status-high-bg
	//  .status-disaster-bg
	@each $type, $icon in (
		na-bg: $zi-circle-question-filled,
		normal-bg: $zi-circle-check-filled,
		info-bg: $zi-circle-info-filled,
		average-bg: $zi-triangle-warning,
		warning-bg: $zi-circle-warning-filled,
		high-bg: $zi-triangle-flipped-warning,
		disaster-bg: $zi-stop-sign
	) {
		.status-#{$type}::before {
			content: $icon;
		}
	}
}

.totals-list {
	> div {
		border-top: 1px solid $ui-border-color;
		color: $font-color;
	}

	.count {
		font-weight: bold;
	}

	&.totals-list-horizontal {
		> div:not(:last-of-type) {
			border-right: 1px solid $ui-border-color;
		}
	}
}

// InputSecret and ButtonDropdown.

.btn-undo.is-focused {
	box-shadow: 0 1px 0 $btn-focus-outline-color, 0 -1px 0 $btn-focus-outline-color;
}

// Tabfilter

.filter-container.tabfilter-container {
	.tabfilter-item-label {
		&.focused {
			box-shadow: 0 0 0 2px $btn-focus-outline-color;
		}
	}
}
